Textfield:- Textfield is type of component in ExtJs.It can be used for take input(single line) from client side.

Code of Textfield is written as:-

               items: [{
                    xtype: 'textfield',
                    fieldLabel:’Text of Text Field'
                         }]
 

Textarea:-Textarea is type of component in ExtJs.It can be used for take input(Multi-line) from client side.

Syntax of Textarea is written as:-

                {
                    xtype: 'textarea',
                    fieldLabel:'Text of Text Area'
                }

Displayfield:-Displayfield is type of component in ExtJs.It can be used for give output from server side to client side.

Syntax of Displayfield is written as:- 

               {
                    xtype: 'displayfield',
                    fieldLabel:'Text of Display Field'
               }

Datefield:- Datefield is type of component in ExtJs.It can be used for take input as date from client side.

Syntax of Datefield is written as:-

               {
                    xtype: 'datefield',
                    fieldLabel:'Text of Date picker'
               }

Button:- Button is type of component in ExtJs.It can be used for fire event on its click for perform action.

Syntax of Button is written as:-

                {
                    xtype: 'button',
                    text: 'Text of Button',
                    width: 'As your requirement in %',
                }

FieldContainer:- FieldContainer is type of component in ExtJs.It can be used as a container for contain another type of component like radiofield.

Syntax of FieldContainer is written as:-

                                 {
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Text of Field container',
                    defaultType: 'type of component like radiofield',
                    defaults: {
                        flex:1
                              },
                    layout: 'hbox', //Type of layout
                    items: [{
                        boxLabel: 'Component text',
                        inputValue: 'as your requirement',
                        id:'as you wish'
                           }]
                }

Radiofield:- Radiofield is type of component in ExtJs.It can be used for take a single input from client side.Its used in a container.

Syntax of Radiofield is written as:-

                               {
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Text of Radio Field',
                    defaultType: 'radiofield',
                    defaults: {
                        flex:1
                    },
                    layout: 'hbox',   // Types of layout
                    items: [{
                        boxLabel: 'Text of radio button field',
                        inputValue: 'as your requirement',
                        id:'radio1'
                    }, {
                        boxLabel: ' Text of radio button field ',
                        inputValue: ' as your requirement ',
                        id: 'radio2'
                    }, {
                        boxLabel: ' Text of radio button field ',
                        inputValue: ' as your requirement ',
                        id:'radio3'
                    }]
                }

Checkbox:- Checkbox  is type of component in ExtJs.It can be used for take multiple input on the basis of client selection.Its defined in a container.

Syntax of Checkbox is written as:-

                {
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Text of Check Box Field',
                    defaultType: 'checkboxfield',
                    items: [{
                        boxLabel: 'text of checkbox',
                        inpuValue: 'as your need',
                        id:'as your wish'
                    }, {
                        boxLabel: ' text of checkbox',
                        inputValue: ' as your need ',
                        id:' as your wish '
                    }, {
                        boxLabel: ' text of checkbox',
                        inputValue: ' as your need ',
                        id:' as your wish '
                    }]
                }

Hiddenfield:- Hiddenfield is type of component in ExtJs.It can be used for give from client side.

Syntax of Hiddenfield is written as:-

                             {
                    xtype: 'hiddenfield',
                    name: 'hidden field',
                    value:'value from hidden field'
              }

Numberfield:- Numberfield is type of component in ExtJs.It can be used for accept only numeric from client side.

Syntax of Numberfield is written as:-

                   {
                    xtype: 'numberfield',
                    anchor: '100%',
                    fieldLabel: 'Text of Numeric Field',
                    maxValue: 99(maximum value),//its produce error while input value 
                    minValue:0(minimum value)               exceeded to maximum value
              }

Spinnerfield:- Spinnerfield is type of component in ExtJs.It can be used for accept numeric value and increment as your requirement.

Syntax of Spinnerfield is written as:-

{
                    xtype: 'spinnerfield',
                    fieldLabel: 'Spinner Field',
                    minValue: 0,
                    increment:1,
                    step: 6,
                    //override onSpinUp (using step isn't neccessary)
                    onSignUp: function (){
                        var me = this;
                        if (!me.readOnly)    {
                            var val = me.step;//set the default value to step value
                            if (me.getValue() !== '') {
                                val = parseInt(me.getValue().slice(0, -5));//gets rid of 
                                                      }                     "packs"
                            me.setValue((val+me.step)+'Pack');
                                              }
                                          },
                     //override onSpinDown
                    onSpinDown: function () {
                        var me = this;
                        if (!me.getValue() !==''){
                            if(me.getValue()!==''){
                            val = parseInt(me.getValue().slice(0,-5));
                                                  }
                        me.setValue((val -me.step)+'Pack');
                                                   }
                                             }
                }

Timefield:- Timefield is type of component in ExtJs.It can be used for diplay a time slot to client for its selection.Its use as a combobox for time.

Syntax of Timefield is written as:-

               {
                    xtype: 'timefield',
                    fieldLabel: 'Text of Time Field label',
                    minValue: '06:00 AM',//Minimum time slot
                    maxValue: '08:00 PM',//Maximum time slot
                    increment: 30,
                    anchor:'100%'
                }

 ComboBox or dropdown menu:- combobox is type of component in ExtJs.It can be used for diplay set of data to client for its selection.Its also named as drop down list or menu for time.

Syntax of ComboBox is written as:-

{
                    xtype: 'combobox',
                    fieldLabel: 'Text of Combo Box',
                    store: Ext.create('Ext.data.Store', {
                        fields: ['abbr', 'name'],
                        data: [{
                            'abbr': 'HTML',
                            'name':'HTML'
                        }, {
                            'abbr': 'CSS',
                            'name':'CSS'
                        }, {
                            'abbr': 'js',
                            'name':'JavaScript'
                        }]
                    }),
                    valueField: 'abbr',
                    displayField:'name'
                }

Filefield:- Filefield is type of component in ExtJs.It can be used for upload files from client side.

Syntax of Filefield is written as:-

                   {
                    xtype: 'filefield',
                    fieldLabel: 'Text of File field',
                    labelWidth: 50,
                    msgTarget: 'side',
                    allowBlank: false,
                    anchor: '100%',
                    buttonText:'Select File....'
                }